<template>
  <ContentWrap>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="hideId" v-show="false">
        <el-input v-model="formData.id" />
      </el-form-item>

      <el-tabs>
        <el-tab-pane label="提现">
          <el-form-item label="提现功能开关" prop="cashOutEnabled">
            <el-switch
              v-model="formData.cashOutEnabled"
              :active-value="true"
              :inactive-value="false"
              active-text="开启"
              inactive-text="关闭"
              :inline-prompt="false"
            />
            <el-text class="w-full" size="small" type="info"
              >钱包的零钱<span class="text-red-400">{{
                formData.cashOutEnabled ? '可以提现' : '不能提现'
              }}</span>
            </el-text>
          </el-form-item>
          <el-form-item label="最小提现金额" prop="cashOutMinMoney">
            <el-input-number
              v-model="computedCashOutMinMoney"
              placeholder="请输入最小提现金额"
              :min="0.01"
              :max="99999999"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text v-if="computedCashOutMinMoney > 0" class="w-full" size="small" type="info">
              需要满<span class="text-red-400"> {{ computedCashOutMinMoney }} 元</span>才可提现。
            </el-text>
            <el-text v-else class="w-full" size="small" type="info">
              可提现<span class="text-red-400">任意金额</span>
            </el-text>
          </el-form-item>
          <el-form-item label="手续费比例" prop="cashOutFeePercent">
            <el-input-number
              v-model="formData.cashOutFeePercent"
              placeholder="请输入手续费比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              提现收取<span class="text-red-400"> {{ formData.cashOutFeePercent }} % </span>的手续费
            </el-text>
          </el-form-item>
          <el-form-item label="公益金比例" prop="cashOutWelfarePercent">
            <el-input-number
              v-model="formData.cashOutWelfarePercent"
              placeholder="请输入公益金比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              提现将<span class="text-red-400"> {{ formData.cashOutWelfarePercent }} % </span
              >放入公益基金。
            </el-text>
          </el-form-item>
          <el-form-item label="提现规则提示" prop="cashOutTips">
            <el-input
              v-model="formData.cashOutTips"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 6 }"
              placeholder="请输入提现规则提示"
            />
            <el-text class="w-full" size="small" type="info">
              提现表单页面的<span class="text-red-400">提示语</span>
            </el-text>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="回调">
          <el-form-item label="支付回调地址" prop="payNotifyUrl">
            <el-input v-model="formData.payNotifyUrl" placeholder="请输入支付回调地址" readonly />
          </el-form-item>
          <el-form-item label="支付跳转地址" prop="payRedirectUrl">
            <el-input v-model="formData.payRedirectUrl" placeholder="请输入支付跳转地址" readonly />
          </el-form-item>
          <el-form-item label="退款回调地址" prop="refundNotifyUrl">
            <el-input
              v-model="formData.refundNotifyUrl"
              placeholder="请输入退款回调地址"
              readonly
            />
          </el-form-item>
          <el-form-item label="转账回调地址" prop="transferNotifyUrl">
            <el-input
              v-model="formData.transferNotifyUrl"
              placeholder="请输入转账回调地址"
              readonly
            />
          </el-form-item>
          <el-form-item label="商户回调地址" prop="merchantNotifyUrl">
            <el-input
              v-model="formData.merchantNotifyUrl"
              placeholder="请输入商户回调地址"
              readonly
            />
          </el-form-item>
          <el-form-item label="分账回调地址" prop="splittingNotifyUrl">
            <el-input
              v-model="formData.splittingNotifyUrl"
              placeholder="请输入分账回调地址"
              readonly
            />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>
<script lang="ts" setup>
import * as ConfigApi from '@/api/pay/config'
import { fenToYuan, yuanToFen } from '@/utils'

defineOptions({ name: 'PayConfig' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref<any>({
  id: undefined,
  cashOutEnabled: true,
  cashOutTransferType: ['wechat', 'bank'],
  cashOutMinMoney: 5000,
  cashOutAutoVerify: false,
  cashOutAutoTransfer: false,
  cashOutFeePercent: 5,
  cashOutWelfarePercent: 0.5,
  cashOutTips: '',
  payNotifyUrl: '',
  payRedirectUrl: '',
  refundNotifyUrl: '',
  transferNotifyUrl: '',
  merchantNotifyUrl: '',
  splittingNotifyUrl: ''
})

const computedCashOutMinMoney = computed({
  get: () => Number(fenToYuan(formData.value.cashOutMinMoney)),
  set: (newValue: number) => {
    formData.value.cashOutMinMoney = yuanToFen(newValue)
  }
})

const formRules = reactive({})
const formRef = ref() // 表单 Ref

/** 修改配置 */
const onSubmit = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value
    await ConfigApi.saveConfig(data)
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

/** 获得配置 */
const getConfig = async () => {
  try {
    const data = await ConfigApi.getConfig()
    if (data === null) {
      return
    }
    formData.value = data
  } finally {
  }
}

onMounted(() => {
  getConfig()
})
</script>
